.warn {
  @apply bg-orange-600;
  @apply text-white;
}
.info {
  @apply bg-gray-600;
  @apply text-white;
}
.error {
  @apply bg-red-600;
  @apply text-white;
}
.success {
  @apply bg-green-600;
  @apply text-white;
}

.modal-root {
  @apply fixed;
  @apply top-0;
  @apply left-0;
  @apply right-0;
  @apply bottom-0;
  @apply z-40;
  @apply flex;
  @apply items-center;

  .mask {
    @apply absolute;
    @apply top-0;
    @apply left-0;
    @apply w-full;
    @apply h-full;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .modal-container {
    width: 90%;
    max-height: 75%;
    @apply max-w-2xl;
    @apply flex;
    @apply flex-col;
    @apply justify-between;

    @apply rounded-lg;
    @apply border;
    @apply border-gray-100;
    @apply px-3;
    @apply py-4;
    @apply mx-auto;
    @apply bg-white;
    z-index: 2;
    .modal-header {
      @apply mb-2;
    }
    .modal-content {
      @apply flex-1;
      @apply bg-gray-200;
      @apply overflow-y-auto;
    }
  }
}
